<template>
  <div id="last-update-article">
    <header>
      <h3># 最新更新</h3>
    </header>
    <div v-for="(item, index) in recommendArticles" :key="index" class="card">
      <h3 class="title color2" @click="viewArticleDetail(item._id)">{{item.articleTitle}}</h3>
      <p class="footer">
        <span class="time">时间:{{item.createTime | date}}</span>
        <span class="look">浏览:{{item.looknum}}</span>
      </p>
    </div>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      recommendArticles: []
    }
  },
  created() {
    this.getRecommendArticles()
  },
  methods: {
    async getRecommendArticles() {
      let res = await this.api.get('/client/getNewArticles')
      if (res.code == 0) this.recommendArticles = res.data
      else this.$message({message: res.message, type: 'warning', showClose: true,})
      // console.log(this.recommendArticles)
    },
    viewArticleDetail(id) {
      this.$router.push({path: `/articleDetail/${id}`})
    }
  },
}
</script>

<style lang="scss">
#last-update-article {
  header {
    padding: 10px 0;
    background-color: rgb(241, 241, 241);
  }
  .card {
    padding: 20px 0;
    border-bottom: 1px solid #eee;
    transition: all 0.3s;
    &:hover {
      background-color: rgba(255, 166, 0, 0.1);
      padding: 15px;
    }
    .title {
      transition: all 0.3s;
      &:hover {
        cursor: pointer;
        color: orange;
      }
      line-height: 20px;
      overflow:hidden;
      text-overflow:ellipsis;
      display:-webkit-box;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:2; 
      font-size: 16px;
      margin-bottom: 10px;
    }
    .footer {
      font-size: 13px;
      color: #999;
      span {
        margin-right: 5px;
      }
    }
  }
}
</style>